<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购买清单</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <style>
        [v-cloak]{
            display: none;
        }
        html,body,#app{
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
        }
        #app{
            overflow: scroll;
            background: #F0F0F0;
        }
        .el-form{
            width: 80%;
            margin: 0 10%;
            box-sizing: border-box;
            padding: 10px 30px 50px 30px;
            background: white;
            min-height: 100%;
        }
        .el-col{
            box-sizing: border-box;
            padding-right: 12px;
        }
        .el-table{
            width: 80%!important;
            margin: 0 10%;
            box-sizing: border-box;
            padding: 10px 30px 50px 30px;
            background: white;
            min-height: 100% !important;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--    添加按钮-->
        <div v-cloak style="text-align: right;width: 80%;margin: 0 10%;">
            <span>
                <el-button type="text" @click="addBuyVisible = true,addBuy.dealId = buyList.dealId">
                    添加</el-button>
            </span>
        </div>
        <!--    清单列表-->
        <el-table
                v-cloak
                :data="buyList.list"
                style="width: 100%">
            <el-table-column
                    prop="buylistid"
                    label="编号"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="buytime"
                    label="购买时间"
                    width="160">
            </el-table-column>
            <el-table-column
                    prop="buymethod"
                    label="购买方式"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="manageperson"
                    label="经手人"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="totalprice"
                    label="总价"
                    width="*">
            </el-table-column>

            <el-table-column width="240">
                <template slot="header" slot-scope="scope">
                    <el-select v-model="buyList.dealId" filterable placeholder="请选择合同"
                               style="width: 160px;">
                        <el-option
                                v-for="item in contractList"
                                :key="item.dealId"
                                :label="item.dealId"
                                :value="item.dealId">
                        </el-option>
                    </el-select>
                </template>
                <template slot-scope="scope">
                    <!--                查看-->
                    <el-button type="success" icon="el-icon-view" size="small"
                                                   @click="view(scope.row)"></el-button>
                    <!--                可操作-->
                    <!--                    <el-button type="primary" icon="el-icon-edit" size="small"-->
                    <!--                               @click="edit(scope.row)"></el-button>-->
                    <!--                    <el-button type="danger" icon="el-icon-delete" size="small"-->
                    <!--                               @click="delete1(scope.$index,scope.row)"></el-button>-->
                </template>
            </el-table-column>

        </el-table>
        <!--    添加清单-->
        <el-dialog
                v-cloak
                title="添加清单"
                width="80%"
                :visible.sync="addBuyVisible">
            <el-form
                    :model="addBuy"
                    label-width="80px"
                    class="demo-dynamic"
                    size="medium">
                <el-form-item label="合同">
                    <el-row>
                        <el-col :span="10">
                            <el-select v-model="addBuy.dealId" filterable placeholder="请选择">
                                <el-option
                                        v-for="item in contractList"
                                        :key="item.dealId"
                                        :label="item.dealId"
                                        :value="item.dealId">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="4" style="text-align: right;">
                            途径
                        </el-col>
                        <el-col :span="10" style="padding: 0">
                            <el-select v-model="addBuy.buyMethod" filterable placeholder="请选择">
                                <el-option value="网购"></el-option>
                                <el-option value="线下"></el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item label="员 工">
                    <el-row>
                        <el-col :span="10">
                            <el-select v-model="addBuy.userName" filterable placeholder="请选择">
                                <el-option
                                        v-for="item in userList"
                                        :key="item.userId"
                                        :label="item.userName"
                                        :value="item.userName">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="4" style="text-align: right;">
                            总价
                        </el-col>
                        <el-col :span="6" style="padding: 0">
                            <el-input v-model="addBuy.totalPrice"></el-input>
                        </el-col>
                        <el-col :span="4" style="padding: 0">
                            <el-button @click="count">计算</el-button>
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item style="margin: 0;padding: 0;">
                    <el-row>
                        <el-col :span="6">名称</el-col>
                        <el-col :span="5">单价</el-col>
                        <el-col :span="4">总量</el-col>
                        <el-col :span="4">剩余</el-col>
                        <el-col :span="5">购买量</el-col>
                    </el-row>
                </el-form-item>

                <el-form-item
                        v-for="(item, index) in addBuy.goods"
                        :label="!index?'商 品':''"
                        :key="item.key">
                    <el-row>
                        <el-col :span="6">
                            <el-input v-model="item.goodsname" placeholder="名称" readonly></el-input>
                        </el-col>
                        <el-col :span="5">
                            <el-input v-model="item.goodsprice" placeholder="单价" readonly></el-input>
                        </el-col>
                        <el-col :span="4">
                            <el-input v-model="item.goodsnumber" placeholder="总量" readonly></el-input>
                        </el-col>
                        <el-col :span="4">
                            <el-input v-model="item.surplus" placeholder="剩余" readonly></el-input>
                        </el-col>
                        <el-col :span="5">
                            <el-input v-model="item.buynumber" placeholder="购买量"></el-input>
                        </el-col>
                    </el-row>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addBuyVisible = false">取 消</el-button>
                <el-button type="primary" @click="addBuySubmit()">确 定</el-button>
            </span>
        </el-dialog>
        <!--    查看清单-->
        <el-dialog
                v-cloak
                title="查看清单"
                width="80%"
                :visible.sync="viewBuyVisible">
            <el-form>

                <el-form-item label="时间">
                    <el-row>
                        <el-col :span="9">
                            <el-input readonly v-model="viewBuy.buy.buytime"
                                      style="width: 100%"></el-input>
                        </el-col>
                        <el-col :span="4" style="text-align: right;">
                            途径
                        </el-col>
                        <el-col :span="9" style="padding: 0">
                            <el-input readonly v-model="viewBuy.buy.buymethod"
                                      style="width: 100%"></el-input>
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item label="员 工">
                    <el-row>
                        <el-col :span="9">
                            <el-input readonly v-model="viewBuy.buy.manageperson"
                                      style="width: 100%"></el-input>
                        </el-col>
                        <el-col :span="4" style="text-align: right;">
                            总价
                        </el-col>
                        <el-col :span="9" style="padding: 0">
                            <el-input v-model="viewBuy.buy.totalprice"
                                      style="width: 100%"></el-input>
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item
                        v-for="(item, index) in viewBuy.goods"
                        :label="!index?'商 品':''"
                        :key="item.fkBuylistid">
                    <el-row>
                        <el-col :span="6">
                            <el-input v-model="item.tempName" placeholder="名称" readonly></el-input>
                        </el-col>
                        <el-col :span="6">
                            <el-input v-model="item.exportnumber" placeholder="单价" readonly></el-input>
                        </el-col>
                        <el-col :span="6">
                            <el-input v-model="item.state" placeholder="购买量"></el-input>
                        </el-col>
                    </el-row>
                </el-form-item>

            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="viewBuyVisible = false">取 消</el-button>
                <el-button type="primary" @click="viewBuyVisible = false">确 定</el-button>
            </span>
        </el-dialog>

    </div>

    <script>
        let app = new Vue({
            el: '#app',
            data(){
                return{
                    userId: '',
                    userList: '',
                    addBuyVisible: false,
                    viewBuyVisible: false,
                    addBuy: {
                        dealId: '',
                        buyMethod: '',
                        userName: '',
                        totalPrice: '',
                        goods:[
                            {
                                goodsname: '',
                                goodsnumber: '',
                                goodsprice: '',
                                listgoodsid: '',
                                tempNumber: '',
                                surplus: '',
                                buynumber: ''
                            }
                        ],
                    },
                    contractList: [],
                    buyList: {
                        dealId: '',
                        list: [],
                    },
                    viewBuy: {
                        buy: '',
                        goods: '',
                    }
                }
            },
            watch: {
                'addBuy.dealId':{
                    handler (newValue, oldValue) {
                        this.getGoods();
                    },
                },
                'buyList.dealId':{
                    handler (newValue, oldValue) {
                        this.getBuyList();
                    },
                }
            },
            created() {
                this.getUserId();
                this.getUserList();
                this.getContractList();
            },
            methods: {
                getUserId(){
                    axios.post(
                        '/member/getUserId'
                    ).then(function (res) {
                        this.userId = res.data;
                    });
                },
                getUserList(){
                    axios.post(
                        '/member/getListOfUser',
                        'currentPage=1&pageSize=1000'
                    ).then(function (res) {
                        // console.info(res.data);
                        let list = res.data;
                        let bufferList = [];
                        for(let key in list){
                            let i = new Object();
                            i.userId = list[key].userid;
                            i.userName = list[key].username;
                            bufferList.push(i);
                        }
                        app.userList = bufferList;
                        // console.info(app.userList);
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                count(){
                    let totalPrice = 0;
                    let list = this.addBuy.goods;
                    for(let key in list){
                        totalPrice = totalPrice + list[key].goodsprice * list[key].buynumber;
                    }
                    this.addBuy.totalPrice = totalPrice;
                },
                getContractList(){
                    axios.post(
                        '/deal/getAllDeal'
                    ).then(function (res) {
                        // console.info(res.data);
                        let list = res.data;
                        let bufferList = [];
                        for(let key in list){
                            let i = new Object();
                            i.canFix = list[key].canFix;
                            i.dealContent = list[key].dealcontent;
                            i.dealId = list[key].dealid;
                            i.dealTime = app.toTimes1(list[key].dealtime);
                            i.signTime = app.toTimes1(list[key].signtime);
                            bufferList.push(i);
                        }
                        app.contractList = bufferList;
                        // console.info(app.contractList);
                    });
                },
                getGoods(){
                    axios.post(
                        '/deal/getAllListGoods',
                        'dealId='+this.addBuy.dealId
                    ).then(function (res) {
                       // console.info(res.data);
                        let list = res.data;
                        let bufferList = [];
                        for(let key in list){
                            let i = new Object();
                            i.goodsname = list[key].goodsname;
                            i.goodsnumber = list[key].goodsnumber;
                            i.goodsprice = list[key].goodsprice;
                            i.listgoodsid = list[key].listgoodsid;
                            i.tempNumber = list[key].tempNumber;
                            i.surplus = list[key].goodsnumber-list[key].tempNumber;
                            i.buynumber = '';
                            bufferList.push(i);
                        }
                        app.addBuy.goods = bufferList;
                        // console.info(app.addBuy.goods);
                    });
                },
                addBuySubmit(){

                    if(this.addBuy.dealId==''){
                        alert("合同不能为空");
                        return;
                    }
                    if(this.addBuy.buyMethod==''){
                        alert("购买途径不能为空");
                        return;
                    }
                    if(this.addBuy.userName==''){
                        alert("员工不能为空");
                        return;
                    }

                    let goodsMessage = '';
                    let list = this.addBuy.goods;
                    for(let key in list){

                        if(list[key].buynumber==''){
                            alert("购买数量不能为空!");
                            return;
                        }
                        if(list[key].buynumber<0){
                            alert("购买数量不能为负数!");
                            return;
                        }
                        if(parseInt(list[key].buynumber)!=list[key].buynumber){
                            alert("购买数量必须为整数!");
                            return;
                        }
                        if(list[key].buynumber>list[key].surplus){
                            alert("购买数量不能超过剩余数量!");
                            return;
                        }
                        goodsMessage = goodsMessage +
                            + list[key].listgoodsid + '#'
                            + list[key].buynumber + ';';
                    }
                    app.count();
                    axios.post(
                        '/buy/addBuyAll',
                        'dealId='+this.addBuy.dealId+
                        '&listGoodsMessage='+goodsMessage+
                        '&managePerson='+this.addBuy.userName+
                        '&buyMethod='+this.addBuy.buyMethod+
                        '&totalPrice='+this.addBuy.totalPrice
                    ).then(function (res) {
                        // console.info(res.data);
                        if(res.data!="添加失败"){
                            app.addBuyVisible = false;
                            app.addSuccess();
                            app.buyList.dealId = app.addBuy.dealId;

                            app.addBuy =  {
                                dealId: '',
                                    buyMethod: '',
                                    userName: '',
                                    totalPrice: '',
                                    goods:[
                                    {
                                        goodsname: '',
                                        goodsnumber: '',
                                        goodsprice: '',
                                        listgoodsid: '',
                                        tempNumber: '',
                                        surplus: '',
                                        buynumber: ''
                                    }
                                ],
                            }
                        }
                    });

                },
                getBuyList(){
                    axios.post(
                        '/buy/getListOfBuyList',
                        'dealId='+this.buyList.dealId+
                        '&currentPage=1'+
                        '&pageSize=1000'
                    ).then(function (res) {
                        // console.info(res.data);
                        let list = res.data;
                        let bufferList = [];
                        for(let key in list){
                            let i = new Object();
                            i.buylistid = list[key].buylistid;
                            i.buymethod = list[key].buymethod;
                            i.manageperson = list[key].manageperson;
                            i.totalprice = list[key].totalprice;
                            i.buytime = app.toTimes1(list[key].buytime);
                            bufferList.push(i);
                        }
                        app.buyList.list = bufferList;
                        // console.info(app.buyList);
                    });
                },
                view(buy){
                    this.viewBuyVisible = true;
                    axios.post(
                        '/buy/getAllOutListByBuyList',
                        "buyListId="+buy.buylistid
                    ).then(function (res) {
                        console.info(res.data);
                        let list = res.data;
                        let bufferList = [];
                        for(let key in list){
                            let i = new Object();
                            i.exportnumber = list[key].exportnumber;
                            i.fkBuylistid = list[key].fkBuylistid;
                            i.fkListgoodsid = list[key].fkListgoodsid;
                            i.outlistid = list[key].outlistid;
                            i.state = list[key].state;
                            i.tempName = list[key].tempName;
                            bufferList.push(i);
                        }
                        app.viewBuy.buy = buy;
                        app.viewBuy.goods = bufferList;
                        // console.info(app.viewBuy.goods);
                        // console.info(app.viewBuy.buy);
                    });
                },
                addSuccess(){
                    this.$message({
                        message:'添加成功',
                        type:'success'
                    });
                },
                editSuccess(){
                    this.$message({
                        message:'修改成功',
                        type:'success'
                    });
                },
                deleteSuccess(){
                    this.$message({
                        message:'删除成功',
                        type:'success'
                    });
                },
                toTimes1(time){
                    //时间戮转时间格式
                    let date = new Date(time);//时间戳为13位的话不需乘1000
                    let Y = date.getFullYear() + '-';
                    let M = ('0'+(date.getMonth()+1)).substr(-2) + '-';
                    let D = ('0'+date.getDate()).substr(-2) + ' ';
                    let h = ('0'+date.getHours()).substr(-2) + ':';
                    let m = ('0'+date.getMinutes()).substr(-2) + '';
                    //let s = ('0'+date.getSeconds()).substr(-2);
                    return Y+M+D+h+m;
                },
            }
        });
    </script>
</body>
</html>